<template>
	<view class="">
		<view class="main">
			{{sayWord}}{{text}}
		</view>
		<button type="primary" @click="say('哈喽：')">Say Hello</button>
		<button type="warn" @click="say('拜拜：')">Say Bye Bye</button>
	</view>
	<view class="">
		
	</view>
</template>

<script setup>
	import {ref}from "vue"
	
	const props = defineProps({
		text:{
			type:String,
			default:"Vue"
		}
	})
	console.log(props);
	const emits = defineEmits(["onChange"])
	const sayWord=ref('......')
	const say = ref(val=>{
		sayWord.value = val
		emits("onChange",val)
	})
	defineExpose({say})
</script>

<style>
	.main{
		padding: 20px;
		text-align: center;
		background-color: #333;
		color: aliceblue;
	}
	view,button{
		margin-top: 10px;
	}
</style>